<template>
    <div class="app-container">
        <div v-show="isshow">
            <el-form ref="form" :model="form" :rules="rules" label-width="120px" :disabled="isshows">
                <el-form-item label="企业名称" prop="companyName">
                    <el-input v-model="form.companyName" placeholder="请输入企业名称" />
                </el-form-item>
                <div class="container">
                    <el-form-item class="container fl" label="所在省" prop="addressProvice">
                        <el-select v-model="form.addressProvice" placeholder="请选择所在省" @change="changecity($event)">
                            <el-option v-for="dict in provinceOptions" :key="dict.areaId" :label="dict.areaName" :value="dict.areaId"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item class="fl" label="所在市" prop="addressCity">
                        <el-select v-model="form.addressCity" placeholder="请选择所在市" @change="changearea($event)">
                            <el-option v-for="dict in cityOptions" :key="dict.areaId" :label="dict.areaName" :value="dict.areaId"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item class="fl" label="所在区" prop="addressArea">
                        <el-select v-model="form.addressArea" placeholder="请选择所在区">
                            <el-option v-for="dict in areaOptions" :key="dict.areaId" :label="dict.areaName" :value="dict.areaId"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item class="fl address" label="详细地址" prop="address">
                        <el-input style="width: 315%;" v-model="form.address" placeholder="请输入详细地址" />
                    </el-form-item>
                </div>
                <div class="container col-3">
                    <el-form-item class="fl" label="联系人姓名" prop="contactPerson">
                        <el-input v-model="form.contactPerson" placeholder="请输入联系人姓名" />
                    </el-form-item>
                    <el-form-item class="fl" label="联系人手机号" prop="contactPhone">
                        <el-input v-model="form.contactPhone" placeholder="请输入联系人手机号" />
                    </el-form-item>
                    <el-form-item class="fl" label="联系人邮箱" prop="contactEmail">
                        <el-input v-model="form.contactEmail" placeholder="请输入联系人邮箱" />
                    </el-form-item>
                </div>
                <div class="container  col-3">
                    <el-form-item class="fl" label="法人姓名" prop="legalPerson">
                        <el-input v-model="form.legalPerson" placeholder="请输入法人姓名" />
                    </el-form-item>
                    <el-form-item class="fl" label="法人手机号" prop="legalPhone">
                        <el-input v-model="form.legalPhone" placeholder="请输入法人手机号" />
                    </el-form-item>
                    <el-form-item class="fl" label="法人身份证号" prop="legalIdcard">
                        <el-input v-model="form.legalIdcard" placeholder="请输入法人身份证号" />
                    </el-form-item>
                </div>

                <el-form-item label-width="120px" label="经营范围" prop="businessScope">
                    <el-input v-model="form.businessScope" placeholder="请输入经营范围" />
                </el-form-item>
                <div class="container col-3">
                    <el-form-item class="fl" label="营业期限" prop="operatingStartTime">
                        <el-date-picker clearable size="small" v-model="form.operatingStartTime" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" placeholder="选择营业期限"> </el-date-picker>
                    </el-form-item>
                    <el-form-item class="fl" label="营业期限" prop="operatingEndTime">
                        <el-date-picker clearable size="small" v-model="form.operatingEndTime" 
                        format="yyyy-MM-dd" type="date" value-format="yyyy-MM-dd" placeholder="选择营业期限"> </el-date-picker>
                    </el-form-item>
                    <el-form-item class="fl" label="企业信用代码" prop="companyCode">
                        <el-input v-model="form.companyCode" placeholder="请输入企业信用代码" />
                    </el-form-item>
                </div>
                <div class="container col-3">
                    <el-form-item class="fl" label="公司网址" prop="companyWeb">
                        <el-input v-model="form.companyWeb" placeholder="请输入公司网址" />
                    </el-form-item>
                    <el-form-item class="fl" label="公司座机" prop="companyPhone">
                        <el-input v-model="form.companyPhone" placeholder="请输入公司座机" />
                    </el-form-item>
                </div>

                <el-form-item label-width="120px" label="公司简介" prop="companyIntro">
                    <el-input rows="10" type="textarea" placeholder="请输入公司简介" v-model="form.companyIntro" maxlength="500" show-word-limit> </el-input>
                </el-form-item>
                <div class="col-3">
                    <el-form-item label-width="120px" label="法人身份证附件" prop="legalIdcardFile" required>
                        <el-upload ref="legalIdcardFile" :headers="headers" :on-success="idcardUploadSuccess" :file-list="form.legalIdcardFile" :action="uploadImgUrl" :before-upload="fieldBeforeUpload" :on-remove="idcardRemove" list-type="picture-card">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                    </el-form-item>

                    <el-form-item label-width="120px" label="企业营业执照" prop="legalOperateFile" required>
                        <el-upload ref="legalOperateFile" :headers="headers" :on-success="operateUploadSuccess" :file-list="form.legalOperateFile" :action="uploadImgUrl" :before-upload="fieldBeforeUpload" :on-remove="operateRemove" list-type="picture-card">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                    </el-form-item>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer" v-show="!isshows">
                <el-checkbox class="color-white" v-model="checked"><span class="text">请勾选电子会员协议</span><span>电子会员协议</span></el-checkbox>
                <el-button type="primary" @click="submitForm">提交认证</el-button>
                <!-- <el-button @click="saveBtn">保存</el-button> -->
            </div>
        </div>
    </div>
</template>

<script>
import { listUserinfo, getUserinfo, delUserinfo, addUserinfo, updateUserinfo, exportUserinfo } from '@/api/biz/userinfo';
import { getToken } from '@/utils/auth';
import { getInfo } from '@/api/login';
export default {
    name: 'Userinfo',
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 总条数
            total: 0,
            // 用户详情表格数据
            userinfoList: [],
            legalIdcardFile: [],
            legalOperateFile: [],
            // 弹出层标题
            title: '',
            // 是否显示弹出层
            open: false,
            provinceOptions: [],
            areaOptions: [],
            cityOptions: [],

            fileUploadAction: '/dev-api/web/fileUpload',
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10
            },

            uploadImgUrl: process.env.VUE_APP_BASE_API + '/common/upload', // 上传的图片服务器地址
            headers: {
                Authorization: 'Bearer ' + getToken()
            },

            // 表单参数
            form: {},
            // 表单校验
            rules: {
                companyName: [
                    {
                        required: true,
                        message: '企业名称不能为空',
                        trigger: 'blur'
                    }
                ],
                addressProvice: [
                    {
                        required: true,
                        message: '所在省不能为空',
                        trigger: 'blur'
                    }
                ],
                addressCity: [
                    {
                        required: true,
                        message: '所在市不能为空',
                        trigger: 'blur'
                    }
                ],
                addressArea: [
                    {
                        required: true,
                        message: '所在区不能为空',
                        trigger: 'blur'
                    }
                ],
                address: [
                    {
                        required: true,
                        message: '详细地址不能为空',
                        trigger: 'blur'
                    }
                ],
                contactPerson: [
                    {
                        required: true,
                        message: '联系人姓名不能为空',
                        trigger: 'blur'
                    }
                ],
                contactPhone: [
                    {
                        required: true,
                        message: '联系人手机号不能为空',
                        trigger: 'blur'
                    }
                ],
                contactEmail: [
                    {
                        required: true,
                        message: '联系人邮箱不能为空',
                        trigger: 'blur'
                    }
                ],
                legalPerson: [
                    {
                        required: true,
                        message: '法人姓名不能为空',
                        trigger: 'blur'
                    }
                ],
                legalPhone: [
                    {
                        required: true,
                        message: '法人手机号不能为空',
                        trigger: 'blur'
                    }
                ],
                legalIdcard: [
                    {
                        required: true,
                        message: '法人身份证号不能为空',
                        trigger: 'blur'
                    }
                ],
                legalIdcardFile: [
                    {
                        required: true,
                        message: '法人身份证附件不能为空',
                        trigger: 'blur'
                    }
                ],
                legalOperateFile: [
                    {
                        required: true,
                        message: '企业营业执照不能为空',
                        trigger: 'blur'
                    }
                ],
                businessScope: [
                    {
                        required: true,
                        message: '经营范围不能为空',
                        trigger: 'blur'
                    }
                ],
                operatingStartTime: [
                    {
                        required: true,
                        message: '营业期限不能为空',
                        trigger: 'blur'
                    }
                ],
                operatingEndTime: [
                    {
                        required: true,
                        message: '营业期限不能为空',
                        trigger: 'blur'
                    }
                ],
                companyCode: [
                    {
                        required: true,
                        message: '企业信用代码不能为空',
                        trigger: 'blur'
                    }
                ]
            },
            checked: false, // 协议
            isshow: true,
            isshows: false
        };
    },
    created() {
        getUserinfo(0).then(response => {
            this.form = response.data;

            this.form.addressProvice = Number(this.form.addressProvice);
            if (this.form.addressCity) {
                this.form.addressCity = Number(this.form.addressCity);
                this.getUrl('/web/getAreaChild/' + this.form.addressProvice).then(response => {
                    this.cityOptions = response.data;
                });
            }

            if (this.form.addressArea) {
                this.form.addressArea = Number(this.form.addressArea);
                this.getUrl('/web/getAreaChild/' + this.form.addressCity).then(response => {
                    this.areaOptions = response.data;
                });
            }

            var images = this.form.legalIdcardFile.split(',');
            var tmp = [];
            images.forEach(item => {
                if (item != '') {
                    tmp.push({
                        name: 'cdscs',
                        url: process.env.VUE_APP_BASE_API + item
                    });
                    this.legalIdcardFile.push(item);
                }
            });
            this.form.legalIdcardFile = tmp;

            var images = this.form.legalOperateFile.split(',');
            var tmp = [];
            images.forEach(item => {
                if (item != '') {
                    tmp.push({
                        name: 'cdscs',
                        url: process.env.VUE_APP_BASE_API + item
                    });
                    this.legalOperateFile.push(item);
                }
            });
            this.form.legalOperateFile = tmp;
        });

        this.getUrl('/web/getArea/1').then(response => {
            this.provinceOptions = response.data;
        });
        getInfo().then(res => {
            //   console.log(res.ApplyStatus);
            // 认证状态 0未提交 1 提交审核 2 认证通过 3 认证不通过',
            if (res.ApplyStatus != '0') {
                this.isshows = true;
            }
        });
    },
    methods: {
        idcardRemove(obj) {
            var tmpimg = obj.url.substr(8);
            this.legalIdcardFile.forEach((item, index) => {
                if (item == tmpimg) {
                    this.legalIdcardFile.splice(index, 1);
                }
            });
        },
        operateRemove(obj) {
            var tmpimg = obj.url.substr(8);
            this.legalOperateFile.forEach((item, index) => {
                if (item == tmpimg) {
                    this.legalOperateFile.splice(index, 1);
                }
            });
        },
        fieldBeforeUpload(file) {
            let isRightSize = file.size / 1024 / 1024 < 2;
            if (!isRightSize) {
                this.$message.error('文件大小超过 2MB');
            }
            return isRightSize;
        },

        idcardUploadSuccess(response) {
            if (response.code == 200) {
                this.legalIdcardFile.push(response.fileName);
            }
        },
        operateUploadSuccess(response) {
            if (response.code == 200) {
                this.legalOperateFile.push(response.fileName);
            }
        },

        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                id: undefined,
                uid: undefined,
                companyName: undefined,
                addressProvice: undefined,
                addressCity: undefined,
                addressArea: undefined,
                address: undefined,
                contactPerson: undefined,
                contactPhone: undefined,
                contactEmail: undefined,
                legalPerson: undefined,
                legalPhone: undefined,
                legalIdcard: undefined,
                legalIdcardFile: [],
                legalOperateFile: [],
                businessScope: undefined,
                operatingStartTime: undefined,
                operatingEndTime: undefined,
                companyCode: undefined,
                companyWeb: undefined,
                companyPhone: undefined,
                companyIntro: undefined,
                quota: undefined,
                quotaStartTime: undefined,
                quotaEndTime: undefined,
                deposit: undefined
            };
            this.resetForm('form');
        },
        changecity(e) {
            this.form.addressCity = '';
            this.form.addressArea = '';
            this.getUrl('/web/getAreaChild/' + e).then(response => {
                this.cityOptions = response.data;
            });
        },
        changearea(e) {
            this.form.addressArea = '';
            this.getUrl('/web/getAreaChild/' + e).then(response => {
                this.areaOptions = response.data;
            });
        },

        /** 提交按钮 */
        submitForm: function() {
            //  console.log(this.legalIdcardFile);
            // console.log(this.legalOperateFile);
            this.form.legalIdcardFile = this.legalIdcardFile.join(',');
            this.form.legalOperateFile = this.legalOperateFile.join(',');

            // console.log(this.form);

            this.$refs['form'].validate(valid => {
                if (valid) {
                    if (this.form.id != undefined) {
                        this.form.applyStatus = 1;
                        updateUserinfo(this.form).then(response => {
                            if (response.code === 200) {
                                this.msgSuccess('修改成功');
                            } else {
                                this.msgError(response.msg);
                            }
                        });
                    }
                }
            });
        },
        saveBtn: function() {
            this.form.legalIdcardFile = this.legalIdcardFile.join(',');
            this.form.legalOperateFile = this.legalOperateFile.join(',');

            if (this.form.id != undefined) {
                updateUserinfo(this.form).then(response => {
                    if (response.code === 200) {
                        this.msgSuccess('保存成功');
                    } else {
                        this.msgError(response.msg);
                    }
                });
            }
        },
        /** 删除按钮操作 */
        handleDelete(row) {
            const ids = row.id || this.ids;
            this.$confirm('是否确认删除用户详情编号为"' + ids + '"的数据项?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(function() {
                    return delUserinfo(ids);
                })
                .then(() => {
                    this.getList();
                    this.msgSuccess('删除成功');
                })
                .catch(function() {});
        },
        /** 导出按钮操作 */
        handleExport() {
            const queryParams = this.queryParams;
            this.$confirm('是否确认导出用户详情数据项?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(function() {
                    return exportUserinfo(queryParams);
                })
                .then(response => {
                    this.download(response.msg);
                })
                .catch(function() {});
        }
    }
};
</script>
<style rel="stylesheet/scss" lang="scss">
.location,
.container {
    display: block;
    overflow: hidden;
}
.location {
    display: flex;
}
.address {
    flex: 1;
}
.location label,
.container label {
}
.col-3 {
    display: flex;
}
.col-3 > div {
    flex: 1;
}
.col-3 > div input {
    width: 100% !important;
}
.col .el-date-editor {
    width: 440px !important;
}
.dialog-footer {
    text-align: center;
    margin: 0 auto;
}
.color-white .text {
    color: #333333 !important;
    margin-right: 10px;
}
.color-white {
    display: block;
    margin-bottom: 20px;
}
.color-white .text + span {
    color: #409eff !important;
}
.app-container .flex div {
    margin: 0 !important;
}
</style>
